<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Path Animation with anime.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
<body>

<svg width="400" height="400">
    <path id="myPath" fill="none" stroke="black" d="M10 90 Q195 10, 380 90 T380 350 Q195 410, 10 350 z"/>
</svg>

<script>
// 获取路径元素
const path = document.getElementById('myPath');

// 获取原始路径数据
const originalD = path.getAttribute('d');

// 开始动画
anime({
    targets: path,
    d: [
        { value: 'M10 90 L380 90 L380 350 L10 350 Z', duration: 1000 },
        { value: 'M10 90 Q195 10, 380 90 T380 350 Q195 410, 10 350 z', duration: 1000 }
    ],
    loop: true,
    easing: 'linear'
});

// 如果需要在动画结束后恢复原始状态，可以添加一个回调函数
// anime({
//     ...
// }).finished.then(() => {
//     path.setAttribute('d', originalD);
// });
</script>

</body>
</html>